<template>  
  <div class="inspection-page">  
    <!-- 顶部导航 -->  
    <header class="header">  
      <div class="header-back" @click="goBack">←</div>  
      <h1 class="header-title">巡检管理</h1>  
      <div class="header-close">×</div>  
    </header>  

    <!-- 搜索栏 -->  
    <div class="search-bar">  
      <i class="iconfont icon-search"></i>  
      <input  
        type="text"  
        class="search-input"  
        placeholder="请输入搜索内容"  
        v-model="searchQuery"  
        @input="filterInspections"  
      />  
    </div>  

    <!-- 条件筛选栏 -->  
    <div class="filter-bar">  
      <div class="filter-item" @click="toggleFilter('location')">  
        巡检位置 <i class="iconfont icon-arrow-down"></i>  
      </div>  
      <div class="filter-item" @click="toggleFilter('status')">  
        巡检状态 <i class="iconfont icon-arrow-down"></i>  
      </div>  
      <div class="filter-item" @click="toggleFilter('person')">  
        巡检人员 <i class="iconfont icon-arrow-down"></i>  
      </div>  
    </div>  

    <!-- 巡检列表 -->  
    <div class="inspection-list">  
      <div  
        class="inspection-item"  
        v-for="(inspection, index) in filteredInspections"  
        :key="index"  
      >  
        <img :src="logo" class="inspection-image" alt="巡检图片" />  
        <div class="inspection-info">  
          <div class="inspection-title">  
            {{ inspection.planName }}  
          </div>  
          <div class="inspection-tags">  
            <span :class="'tag problem' " v-if="inspection.rotate == '0' ">  
              开始  
            </span>  
            <span :class="'tag normal' " v-if="inspection.rotate == '1' ">  
              暂停 
            </span>  
            <span :class="'tag wancheng' " v-if="inspection.rotate == '2' ">  
              已完成
            </span> 
            <span class="tag person">{{ inspection.userName }}</span>  
            <span class="tag date">{{ inspection.endTime }}</span>  
          </div>  

          <div class="inspection-tags">  
            <span :class="'tag problem' " v-if="inspection.status == '0' ">  
              有问题  
            </span>  
            <span :class="'tag normal' " v-if="inspection.status == '1' ">  
              正常 
            </span>  
            <span :class="'tag wancheng' " v-if="inspection.status == '2' ">  
              巡检中
            </span> 
          </div>

          <div class="inspection-location">  
            <i class="iconfont icon-location"></i> {{ inspection.deviceLocation }}  
          </div>  
          <div class="inspection-actions">  
            <button class="action-button upload" @click="uploadRecord(inspection.id)" v-if="inspection.inspectionRecordId == null " >记录上传</button>  
            <button class="action-button uploaded" @click="uploadRecord(inspection.id)" v-if="inspection.inspectionRecordId != null " disabled >已上传</button>  
            <button class="action-button path" @click="trajectory(inspection.id)" >巡检轨迹</button>  
            <button class="action-button report"  @click="faultDeclaration(inspection.id)" v-if="inspection.faultDeclarationId == null " >故障申报</button>  
            <button class="action-button uploaded"  @click="faultDeclaration(inspection.id)" v-if="inspection.faultDeclarationId != null " disabled >已申报</button>  
          </div>  
        </div>  
      </div>  
    </div>  

    <!-- 底部导航栏 -->  
    <BottomNav :activeTab="'inspect'" />  
  </div>  
</template>  

<script>  
import BottomNav from "../components/mobileBottomNav.vue";  
import {userList,deviceList,getDepts,getUsers,getSchedules,addCheckingPlan,getPlan} from "@/api/wushui/inspection";
import logo from '@/assets/logo/logo.png'

export default {  
  name: "InspectionPage",  
  components: {  
    BottomNav,  
  },  
  data() {  
    return {  
      logo,
      searchQuery: "", // 搜索内容  
      filteredInspections:[],
      inspections: [],  
    };  
  },  
   created() {
    this.getList();
  },
  methods: {  
    uploadRecord(id) {  
      const planId = { key: id }; // 要传递的数据  
      // this.$router.push({ path: '/inspectionRecord', query: planId });  
      this.$router.push({ path: '/inspectionRecord', query: { planId: id } });
    } ,
    trajectory(id) {  
      const planId = { key: id }; // 要传递的数据  
      // this.$router.push({ path: '/inspectionRecord', query: planId });  
      this.$router.push({ path: '/trajectory', query: { planId: id } });
    } ,

    // uploadRecord(){
    //  this.$router.push("/inspectionRecord");  
    // },
    faultDeclaration(id) {  
      const planId = { key: id }; // 要传递的数据  
      // this.$router.push({ path: '/inspectionRecord', query: planId });  
      this.$router.push({ path: '/faultDeclaration', query: { planId: id } });
    } ,
    
    getPlan(){
        getPlan(this.searchQuery).then((response) => {
          this.filteredInspections = response.rows;
          console.log(response)
        }).catch(() => {
          this.$message.error("获取数据失败");
        });       
    },
    getList() {
      this.getPlan();
    },
    
    goBack() {  
      alert("返回上一页");  
    },  
    toggleFilter(filterType) {  
      alert(`筛选：${filterType}`);  
    },  
    filterInspections() {  
      const query = this.searchQuery.toLowerCase();  
      this.inspections = this.inspections.filter((inspection) =>  
        inspection.name.toLowerCase().includes(query)  
      );  
    },  
  },  
};  
</script>  

<style scoped>  
/* 页面主样式 */  
.inspection-page {  
  font-family: Arial, sans-serif;  
  background-color: #f9f9f9;  
  padding-bottom: 60px; /* 防止被底部导航覆盖 */  
}  

/* 顶部导航 */  
.header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.header-back,  
.header-close {  
  font-size: 18px;  
  cursor: pointer;  
}  

.header-title {  
  font-size: 18px;  
  font-weight: bold;  
  color: #333;  
}  

/* 搜索栏样式 */  
.search-bar {  
  display: flex;  
  align-items: center;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.search-input {  
  flex: 1;  
  border: none;  
  outline: none;  
  font-size: 14px;  
  padding: 5px;  
  color: #888;  
  background: #f9f9f9;  
  border-radius: 5px;  
}  

/* 筛选栏样式 */  
.filter-bar {  
  display: flex;  
  justify-content: space-between;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.filter-item {  
  font-size: 14px;  
  cursor: pointer;  
  color: #333;  
  display: flex;  
  align-items: center;  
}  

.filter-item .icon-arrow-down {  
  font-size: 12px;  
  margin-left: 5px;  
}  

/* 巡检列表样式 */  
.inspection-list {  
  padding: 10px;  
}  

.inspection-item {  
  display: flex;  
  gap: 10px;  
  background: white;  
  margin-bottom: 10px;  
  padding: 15px;  
  border-radius: 8px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);  
}  

.inspection-image {  
  width: 90px;  
  height: 90px;  
  border-radius: 8px;  
  object-fit: cover;  
}  

.inspection-info {  
  flex: 1;  
}  

.inspection-title {  
  font-size: 16px;  
  font-weight: bold;  
  color: #333;  
}  

.inspection-tags {  
  margin: 5px 0;  
}  

.tag {  
  font-size: 12px;  
  padding: 2px 8px;  
  margin-right: 5px;  
  border-radius: 4px;  
  color: white;  
}  

.tag.problem {  
  background: #dc3545;  
}  

.tag.normal {  
  background: #28a745;  
}  
.tag.wancheng {  
  background: #c0bfc4;  
}  


.tag.in-progress {  
  background: #ffc107;  
  color: black;  
}  

.tag.person {  
  background: #007bff;  
}  

.tag.date {  
  background: #ff9800;  
}  

.inspection-location {  
  font-size: 14px;  
  color: #666;  
}  

.inspection-actions {  
  display: flex;  
  gap: 10px;  
  margin-top: 10px;  
}  

.action-button {  
  font-size: 12px;  
  padding: 5px 10px;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  color: white;  
}  

.action-button.upload {  
  background: #28a745;  
} 
.action-button.uploaded {  
  background: #ced8d0;  
}   

.action-button.path {  
  background: #007bff;  
}  

.action-button.report {  
  background: #dc3545;  
}  

.action-button:hover {  
  opacity: 0.9;  
}  
</style>